<template>
  <div class="row">
    <div v-for="column in columnList" :key="column._id" class="col-4 mb-4">
      <div class="card h-100 shadow-sm">
        <div class="card-body text-center">
          <img
            :src="column.avatar && column.avatar.url"
            :alt="column.title"
            class="rounded-circle boder border-light my-3 avater"
          />
          <h5 class="card-title text-truncate">{{ column.title }}</h5>
          <p class="card-text text-left description text-secondary">
            {{ column.description }}
          </p>
          <router-link :to="`/column/${column._id}`" class="btn btn-primary"
            >进入专栏</router-link
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { computed, defineComponent, PropType } from "vue";
import { ColumnProps } from "../utils/interface";

export default defineComponent({
  name: "ColumnList",
  props: {
    list: {
      // 想要把构造函数Array断言成类型，需要借助PropType。好处有两个：
      // 1. 在ts中有相关类型的代码补全提示
      // 2. 到vatur里设置一通，在模板里面也有代码补全提示
      type: Array as PropType<ColumnProps[]>,
      required: true,
    },
  },
  components: {},
  setup(props) {
    const columnList = computed(() => {
      return props.list.map((column) => {
        // 设置默认头像
        if (!column.avatar) {
          column.avatar = {
            url: require("@/assets/defaultAvatar.png"),
          };
        } else if(column.avatar.url&&!column.avatar.url.includes('?x-oss-process=image')){
          // 使用阿里云对象存储oss 处理一下图片大小 节约带宽资源（按长边缩放）
          // 防止网站返回的时候，图片地址重复累加报错
          column.avatar.url =
            column.avatar.url + "?x-oss-process=image/resize,m_fill,h_50,w_50";
        }
        return column;
      });
    });
    return {
      columnList,
    };
  },
});
</script>
<style scoped>
.description {
  line-height: 20px;
  height: 60px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
}
.avater {
  width: 50px;
  height: 50px;
}
</style>